import {ElMessage} from 'element-plus';
import ArkUpload from '@/components/ark-component-v1/ark-upload/ArkUpload.vue';

export default {
  title: 'ark-component-v1/ArkUpload',
  component: ArkUpload,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus、element-plus-icons、tailwindcss、lodash、iconfont、cropperjs、ArkIconFont</span> 使用`
      }
    }
  },
  argTypes: {
    uploadOptions: {description: '上传配置对象'},
    cropperOptions: {description: '剪裁配置对象'},
    modelValue: {description: '文件列表，配合v-model实现双向绑定'},
    default: {description: '上传主体部分'},
    'update:modelValue': {description: '文件列表变化后modelValue更新事件，参数为更新后的值'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkUpload},
    setup() {
      return {args};
    },
    template: `
      <div style="height: 650px;width: 850px">
        <ArkUpload v-bind="args" v-model="args.modelValue"/>
      </div>`,
  }),
  args: {
    uploadOptions: {
      attributes: {
        limit: 4,
        'list-type': 'picture'
      },
      // accept: MsUploadConstant.type.image,
      // maxFileSize: 20000,
      tip: '预览的图片应该为剪裁后的，但此时无将文件存于本地通过URL访问的后端逻辑，所以暂时无法演示',
      contextPath: '/upload',
      request: (elFile) => {
        ElMessage({
          message: '上传文件操作，参数请看控制台打印',
          type: 'success',
        });
        console.log('上传文件操作参数', elFile);
        
        // 后端书写将文件存于本地的逻辑和通过URL访问到本地文件的逻辑！！
        return {
          msg: '查询成功',
          code: '00000',
          data: {
            id: '17485471183998853' + Math.round(Math.random() * 10),
            relativePath: '/' + elFile.file.name,
            originalName: elFile.file.name,
            extName: elFile.file.name.split('.')[1],
            mimeType: 'application/octet-stream',
            fileSize: elFile.file.size,
          }
        };
      },
      error: (msg) => {
        ElMessage({
          message: msg,
          type: 'error',
        });
      },
    },
    cropperOptions: {
      disabled: false,
      success: () => {
        ElMessage({
          message: '上传剪裁图片文件操作，无参数',
          type: 'success',
        });
      }
    },
    modelValue: [
      {
        'id': '1749345015123021824',
        'originalName': 'image.jpg',
        'extName': 'jpg',
        'relativePath': '/image.jpg',
        'mimeType': 'application/octet-stream',
        'fileSize': 427437
      }
    ]
  }
};